<template>
    <div class="descriptionContainer">
        <img src="/src/assets/img/games/brawl/leftBack02.webp" alt="">
        <div class="textDescription">
            <h1>3V3 AND BATTLE ROYALE</h1>
            <p>Time to BRAWL! Team up with your friends and get ready for epic multiplayer MAYHEM! Brawl Stars is the
                newest game from the makers of Clash of Clans and Clash Royale. Jump into your favorite game mode and
                play quick matches with your friends. Shoot 'em up, blow 'em up, punch 'em out and win the BRAWL.</p>
            <div class="app-downloads">
                <a href="https://apps.apple.com/us/app/brawl-stars/id1229016807" target="_blank"
                   class="app-store-link"><img
                    src="/src/assets/img/footer/appstore.webp" alt="App Store"></a>
                <a href="https://play.google.com/store/apps/details?id=com.supercell.brawlstars&hl=en&pli=1"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/footer/googlestore.webp"
                                                alt="Google Play"></a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.descriptionContainer {
    padding: 50px 0;
    display: flex;
}

.descriptionContainer img {
    width: 58%;
    margin-left: -16%;
}

.descriptionContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.app-downloads a {
    margin-right: 20px;
}

.app-store-link img, .play-store-link img {
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
}
</style>